<template>
  <a-card :bordered="false" class="row-card">
     <div class="card-image-icon">
       <a-row align="center">
         <a-col flex="70px">
           <img :src="imgSrc" alt="">
         </a-col>
         <a-col flex="auto" style="padding-left: 65px;">
            <div class="card-sub-title">{{ subTitle }}</div>
            <div class="card-title">{{ title }}</div>
         </a-col>
       </a-row>
     </div> 
  </a-card>
</template>

<script setup lang="ts">
import { ref , reactive, computed } from 'vue'
import usageCash from '@/assets/images/usage-cash.svg?url'
import usageSpeed from '@/assets/images/usage-speed.svg?url'
import usagePraise from '@/assets/images/usage-praise.svg?url'
import usageDollars from '@/assets/images/usage-dollars.svg?url'
import usageClock from '@/assets/images/usage-clock.svg?url'
import usageCard from '@/assets/images/usage-card.svg?url'

let props = defineProps({
    type: {
      type: String,
      default: ()=> 'speed'
    },
    subTitle:{
      type: String,
      default: ()=> ''
    },
    title:{
      type: String,
      default: ()=> ''
    },
})

const imgSrc = computed(()=>{
    switch(props.type){
      case 'speed': return usageSpeed;
      case 'cash': return usageCash;
      case 'praise': return usagePraise;
      case 'dollars': return usageDollars;
      case 'clock': return usageClock;
      case 'card': return usageCard;
    }
})

</script>

<style scoped lang='less'>
 .row-card{
  padding: 9px 28px;
  background: #FFFFFF;
  box-shadow: 0px 0px 16px 1px rgba(126,126,126,0.16);
  border-radius: 10px 10px 10px 10px;
 }

 .card-content{
  
 }

 .card-sub-title{
  font-weight: 400;
  font-size: 16px;
  color: #747E8E;
 }

 .card-title{
  margin-top: 10px;
  font-weight: 600;
  font-size: 32px;
  color: #333333;
 }

</style>